<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../static/jquery/jquery-1.12.4.min.js"></script>
</head>
<body>

<hr>
<h1>案例2：添加用例，下拉选择</h1>
<form action="">
    项目：
    <select name="pro" id="pro">
        <option value="">请选择</option>
    </select>
    接口：
    <select name="inter" id="inter">
        <option value="">请选择</option>
    </select>
</form>

<hr>
<h1>案例3：跨域请求的问题</h1>
<div class="login_box">
    <div class="login_title">管 理 员 登 录</div>
    <form action="http://www.lemonban.com/user/ajax/login" method="post">
        <div class="input_text">
            <input type="text" class="input" name="account" id="username" placeholder="请输入账号">
        </div>
        <div class="input_text">
            <input type="password" class="input" name="password" id="password" placeholder="请输入密码">
        </div>
        <input type="hidden" name="ipForget" value=true>
        <div class="input_text" >
            <input type="button" class="btn" id="btn" value="点 击 登 录">
        </div>


    </form>
</div>

<script type="text/javascript">
    // // 等页面加载完以后执行下面代码
    // $(function () {
    //     // 发送请求获取所在的项目
    //     var pro = $('#pro');
    //     var inter = $('#inter');
    //     $.ajax({
    //         url: '/pro_list',
    //         method: 'get',
    //         dataType: 'json'
    //         // 获取回调数据
    //     }).done(function (data) {
    //         if (code === '1') {
    //             // 获取返回data数据中的每条项目名称
    //             for (i in data.data) {
    //                 item = data.data[i];
    //                 // js中不存在格式化，所以通过字符串拼接来实现，
    //                 // 改变value值，将内容写入元素中
    //                 var content = '<option value="' + item.id + '">' + item.title + '</option>';
    //                 pro.append(content)
    //             }
    //
    //         }
    //
    //     });
    //
    //     // 当选择某个项目时，获取某个项目的接口
    //     //当元素的值发生变化时(value值发生了变化)，会触发change事件
    //     pro.change(function () {
    //         // 获取当前选中项目的value值
    //         var pro_id = $(this).val();
    //         $.ajax({
    //             url: '/interface',
    //             data:{
    //                 pro_id:pro_id
    //             },
    //             method: 'post',
    //             dataType: 'json'
    //             // 获取回调数据
    //         }).done(function (data) {
    //             if(data.code ==='1'){
    //                 // 每次加入元素之前，先把以前的元素清空
    //                 inter.empty();
    //                 for (i in data){
    //                     item = data.data[i];
    //                     var content = '<option value="">'+item.name+'</option>';
    //                     inter.append(content)
    //                 }
    //
    //             }
    //
    //
    //
    //         });
    //     })
    // });


    /*
    ajax 不能直接去请求，非同一个域名下面的接口
    ajsx 跨域请求可以通过指定datatype为jsonp来实现(前提的服务器支持跨域请求)
    http://www.lemonban.com/user/ajax/login
    account:111111111
    password:11111111
    ipForget:ture
    */

    $('#btn').click(function () {
        // 获取账号输入框的内容
        var user = $('#username').val();
        var pwd = $('#password').val();
        // 通过ajax发送请求
        $.ajax({
            url: 'http://www.lemonban.com/user/ajax/login',
            data:{
                        'account':111111111,
                        'password':11111111,
                        'ipForget':true
                },
            method: 'post',
                // jsonp 支持跨域请求
            dataType: 'jsonp'
        }).done(function (data) {
            alert(data.message)
        }).fail(function () {
            // 请求失败的回调函数
            alert('请求失败')
        })
    })

    //     $('.btn').click(function () {
    //     // 获取账号,val() 获取元素的值
    //     var user = $('#username').val();
    //     // 获取密码
    //     var pwd = $('#password').val();
    //     // 发送请求
    //     $.ajax({
    //         url: 'http://www.lemonban.com/user/ajax/login',
    //         data:{
    //                     'account':111111111,
    //                     'password':11111111,
    //                     'ipForget':true
    //             },
    //         method:'post',
    //         dataType:'jsonp'
    //
    //     }).done(function (data) {
    //         alert(data.message)
    //     }).fail(function (data) {
    //         alert('请求失败')
    //
    //     })
    //
    // })

</script>

</body>
</html>